<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动化脚本平台 - 脚本商店</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: #f8fafc;
            color: #2d3436;
            line-height: 1.6;
        }

        .header {
            background: rgba(255, 255, 255, 0.95);
            padding: 1.2rem 2.5rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(12px);
        }

        .nav {
            max-width: 1280px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            text-decoration: none;
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -0.5px;
        }

        .nav-links {
            display: flex;
            gap: 2.5rem;
            align-items: center;
        }

        .nav-links a {
            color: #4b5563;
            text-decoration: none;
            font-weight: 600;
            padding: 10px 20px;
            border-radius: 24px;
            transition: all 0.3s ease;
            font-size: 1.05rem;
        }

        .nav-links a:hover {
            background: #f1f5f9;
            color: #2563eb;
            transform: translateY(-1px);
        }

        .main-container {
            max-width: 1280px;
            margin: 100px auto 0;
            padding: 2.5rem;
        }

        .store-tabs {
            display: flex;
            gap: 1.2rem;
            margin-bottom: 3rem;
        }

        .tab-btn {
            padding: 1rem 2.5rem;
            border: none;
            border-radius: 24px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #fff;
            color: #64748b;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .tab-btn.active {
            background: #2563eb;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(37,99,235,0.2);
        }

        .script-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 2.5rem;
        }

        .script-card {
            background: #fff;
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .script-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 32px rgba(0,0,0,0.1);
        }

        .price-tag {
            position: absolute;
            top: 1.2rem;
            right: 1.2rem;
            padding: 0.6rem 1.2rem;
            border-radius: 24px;
            font-weight: 600;
            font-size: 1.1rem;
        }

        .free {
            background: #ecfdf5;
            color: #059669;
        }

        .paid {
            background: #fef2f2;
            color: #dc2626;
        }

        .script-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: #2563eb;
            margin-bottom: 1.2rem;
            padding-right: 90px;
            letter-spacing: -0.3px;
        }

        .script-desc {
            color: #64748b;
            font-size: 1.05rem;
            margin-bottom: 1.8rem;
            height: 70px;
            overflow: hidden;
            line-height: 1.7;
        }

        .script-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #64748b;
            font-size: 1rem;
            font-weight: 500;
        }

        .purchase-btn {
            width: 100%;
            padding: 1rem;
            margin-top: 1.5rem;
            border: none;
            border-radius: 24px;
            background: #2563eb;
            color: white;
            font-weight: 600;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(37,99,235,0.2);
        }

        .purchase-btn:hover {
            background: #1d4ed8;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(37,99,235,0.3);
        }

        .purchase-btn.free {
            background: #059669;
            box-shadow: 0 4px 12px rgba(5,150,105,0.2);
        }

        .purchase-btn.free:hover {
            background: #047857;
            box-shadow: 0 6px 16px rgba(5,150,105,0.3);
        }

        /* 支付弹窗样式 */
        .payment-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(8px);
        }

        .payment-content {
            background: white;
            padding: 3rem;
            border-radius: 24px;
            width: 90%;
            max-width: 520px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.15);
            position: relative;
        }

        .payment-header {
            text-align: center;
            margin-bottom: 2.5rem;
        }

        .payment-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: #2563eb;
            margin-bottom: 0.8rem;
            letter-spacing: -0.5px;
        }

        .payment-price {
            font-size: 2.4rem;
            font-weight: 800;
            color: #dc2626;
            letter-spacing: -1px;
        }

        .payment-methods {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 2.5rem;
        }

        .payment-method {
            flex: 1;
            padding: 1.5rem;
            border: 2px solid #e2e8f0;
            border-radius: 16px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
        }

        .payment-method.active {
            border-color: #2563eb;
            background: #eff6ff;
        }

        .payment-method img {
            width: 40px;
            height: 40px;
            margin-bottom: 0.8rem;
        }

        .qr-container {
            text-align: center;
            margin-bottom: 2rem;
        }

        .qr-code {
            width: 240px;
            height: 240px;
            margin: 0 auto;
            background: #f8fafc;
            border-radius: 12px;
            padding: 1.2rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }

        .payment-footer {
            text-align: center;
            color: #64748b;
            font-size: 1rem;
            line-height: 1.8;
        }

        .close-modal {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            font-size: 1.8rem;
            color: #64748b;
            cursor: pointer;
            border: none;
            background: none;
            transition: all 0.3s ease;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-modal:hover {
            background: #f1f5f9;
            color: #2563eb;
        }
    </style>
    <script>
        function downloadScript(scriptId) {
            fetch(`/api/scripts/download/${scriptId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if(data.success) {
                    alert('脚本下载成功!');
                } else {
                    alert('下载失败: ' + data.message);
                }
            })
            .catch(error => {
                alert('下载出错: ' + error.message);
            });
        }

        function purchaseScript(scriptId, price) {
            const modal = document.getElementById('paymentModal');
            const priceElement = document.getElementById('paymentPrice');
            const scriptTitleElement = document.getElementById('scriptTitle');
            
            priceElement.textContent = `￥${price.toFixed(2)}`;
            scriptTitleElement.textContent = document.querySelector(`[onclick="purchaseScript(${scriptId}, ${price})"]`)
                .closest('.script-card')
                .querySelector('.script-title').textContent;
            
            modal.style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }

        function closePaymentModal() {
            document.getElementById('paymentModal').style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        function selectPaymentMethod(method) {
            document.querySelectorAll('.payment-method').forEach(el => {
                el.classList.remove('active');
            });
            
            document.querySelector(`.payment-method[data-method="${method}"]`).classList.add('active');
            
            const qrCode = document.getElementById('qrCode');
            qrCode.src = `/assets/qr-${method}.png`;
        }

        window.onclick = function(event) {
            const modal = document.getElementById('paymentModal');
            if (event.target == modal) {
                closePaymentModal();
            }
        }
    </script>
</head>
<body>
    <header class="header">
        <nav class="nav">
            <a href="/" class="logo">自动化脚本平台</a>
            <div class="nav-links">
                <a href="/scripts">我的脚本</a>
                <a href="/store">脚本商店</a>
                <a href="/manage">个人中心</a>
                <a href="/logout">退出登录</a>
            </div>
        </nav>
    </header>

    <main class="main-container">
        <div class="store-tabs">
            <button class="tab-btn active">全部脚本</button>
            <button class="tab-btn">免费脚本</button>
            <button class="tab-btn">付费脚本</button>
        </div>

        <div class="script-grid">
            <!-- 免费脚本 -->
            <div class="script-card">
                <span class="price-tag free">免费</span>
                <h3 class="script-title">网页数据采集助手</h3>
                <p class="script-desc">快速采集网页数据，支持批量操作和多种数据格式导出。适合初学者使用。</p>
                <div class="script-meta">
                    <span>下载次数: 1280</span>
                    <span>评分: 4.8分</span>
                </div>
                <button class="purchase-btn free" onclick="downloadScript(1)">立即获取</button>
            </div>

            <div class="script-card">
                <span class="price-tag free">免费</span>
                <h3 class="script-title">文件批量重命名工具</h3>
                <p class="script-desc">快速批量重命名文件，支持多种命名规则和格式化选项。</p>
                <div class="script-meta">
                    <span>下载次数: 856</span>
                    <span>评分: 4.6分</span>
                </div>
                <button class="purchase-btn free" onclick="downloadScript(2)">立即获取</button>
            </div>

            <!-- 付费脚本 -->
            <div class="script-card">
                <span class="price-tag paid">￥99</span>
                <h3 class="script-title">智能数据分析系统</h3>
                <p class="script-desc">专业的数据分析工具，支持多维度分析、可视化图表生成、报告导出等功能。</p>
                <div class="script-meta">
                    <span>销量: 368</span>
                    <span>评分: 4.9分</span>
                </div>
                <button class="purchase-btn" onclick="purchaseScript(3, 99)">立即购买</button>
            </div>

            <div class="script-card">
                <span class="price-tag paid">￥199</span>
                <h3 class="script-title">企业自动化测试套件</h3>
                <p class="script-desc">企业级自动化测试解决方案，包含UI测试、接口测试、性能测试等完整功能。</p>
                <div class="script-meta">
                    <span>销量: 246</span>
                    <span>评分: 4.7分</span>
                </div>
                <button class="purchase-btn" onclick="purchaseScript(4, 199)">立即购买</button>
            </div>
        </div>
    </main>

    <!-- 支付弹窗 -->
    <div id="paymentModal" class="payment-modal">
        <div class="payment-content">
            <button class="close-modal" onclick="closePaymentModal()">×</button>
            <div class="payment-header">
                <h3 id="scriptTitle" class="payment-title">智能数据分析系统</h3>
                <div id="paymentPrice" class="payment-price">￥99.00</div>
            </div>
            <div class="payment-methods">
                <div class="payment-method active" data-method="alipay" onclick="selectPaymentMethod('alipay')">
                    <img src="/assets/alipay-icon.png" alt="支付宝">
                    <div>支付宝</div>
                </div>
                <div class="payment-method" data-method="wechat" onclick="selectPaymentMethod('wechat')">
                    <img src="/assets/wechat-icon.png" alt="微信">
                    <div>微信支付</div>
                </div>
            </div>
            <div class="qr-container">
                <img id="qrCode" class="qr-code" src="/assets/qr-alipay.png" alt="支付二维码">
            </div>
            <div class="payment-footer">
                <p>请使用手机扫描二维码完成支付</p>
                <p>支付完成后将自动发送下载链接到您的邮箱</p>
            </div>
        </div>
    </div>
</body>
</html>
